<template>
	<div class="banxin">
		<div class="root-component">
		   <div class="root-component-left">
				<div class="index-left">
					<div class="index-left-content">
						<h2>全部产品</h2>
						<template v-for="product in productList"> 
							<h3>{{product.title}}</h3>
							<ul>
								<li v-for="item in product.list">
									<a :href="item.url">{{item.name}}</a>
									<span v-if="item.hot" class="hot-tag">HOT</span>
								</li>
							</ul>
							<div v-if="product.last" class="hr"></div>
						</template>
					</div>
				</div>

				<div class="index-botton">
					<div class="index-botton-content">
						<h2>最新消息</h2>
							<ul>
								<li v-for="item in newsList">
									<a :href="item.url">{{item.title}}</a>
								</li>	
							</ul>
					</div>		
				</div>
			</div>
			<div class="index-right">
					<slide-show></slide-show>
					<div class="index-right-content-text"
						 v-for="(item , index) in boardList"
						 :class="[{'line-last' : index % 2 !==0},
						 'index-img-'+item.id]"> 
						 <div class="index-right-inner">
						 	<h2>{{item.title}}</h2> 
							<p>{{item.description}}</p>
							<div class="index-right-content-button">
								<a href="" class="button">立即购买</a>
							</div>
						 </div>			
					</div>			
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
import slideShow from './slideShow'
	export default {
		//这是它的一个生命周期钩子函数，页面渲染时候调用的。就是一个vue实例被生成后调用这个函数
		created(){
			console.log("执行一次")
		},
		components:{
			slideShow
		},
		data(){
			return{
				productList:{
					pc:{
						'title':'PC产品',
						last:true,
						list:[
							{
								name:'数据统计',
								url:'http://starcraft.com'
							},
							{
								name:'数据预测',
								url:'http://warcraft.com'
							},
							{
								name:'流量分析',
								url:'http://overwatch.com',
								hot:true
							},
							{
								name:'广告发布',
								url:'http://hearstone.com'
							} 
						]
					},
					app:{
						'title':'应用类',
						list:[
							{
								name:'91助手',
								url:'http://weixin.com'
							},
							{
								name:'产品助手',
								url:'http://twitter.com',
								hot:true
							},
							{
								name:'智能地图',
								url:'http://maps.com'
							},
							{
								name:'团队语音',
								url:'http://phone.com'
							}
						]
					}
				},
				newsList:[
			 	{
			 		title:'数据统计',
			 		url:'http://starcraft.com' 
			 	},
			 	{
			 		title:'数据统计',
			 		url:'http://starcraft.com'
			 	},
			 	{
			 		title:'数据统计',
			 		url:'http://starcraft.com'
			 	},
			 	{
			 		title:'数据统计',
			 		url:'http://starcraft.com'
			 	}
			 ],
			 boardList:[
			 	{
			 		title:'开放产品',
			 		description:'开放产品是开放的',
			 		id:'1',
			 		saleout:false
			 	},
			 	{
			 		title:'品牌营销',
			 		description:'品牌营销帮助你的产品更好',
			 		id:'2',
			 		saleout:false
			 	},
			 	{
			 		title:'使命必达',
			 		description:'使命必达快速迭代永远保持',
			 		id:'3',
			 		saleout:false
			 	},
			 	{
			 		title:'品牌营销',
			 		description:'品牌营销帮助你的产品更好',
			 		id:'4',
			 		saleout:false
			 	}
			 ]
			}
		}	 
	}
</script>
<style type="text/css">
	/*中间左侧*/
	.hr{
		background-color: red;
		height: 2px;
		width: 300px;
		background-color: #f2f3f5;
		margin: 10px 0px;
	}

	.root-component{
		height: 911px;
		background-color:#f2f3f5;
		margin-top: 30px;
	}
	
	.root-component-left{
		float: left;
	}

	.index-left{
		width: 300px;
		height: 390px;
		background-color: white;
	}

	.index-left-content{
		width: 300px;
		height: 30px;
		background-color: #4cc08b;
		line-height: 30px;	
	}

	.index-left-content h2{
		margin-left: 20px;
		color: white;
		font-weight:900;
	} 

	.index-left-content h3{
		margin-left: 20px;
		color: block;
		font-weight:900; 
	}
 
	.index-left-content li a{ 
		margin-left: 20px;
		color: black;
	}

	.hot-tag{
		background-color: red;
		border-radius: 5px;
		font-size: 13px;
		color: white;
	}

	/*中间下部*/
	.index-botton{
		background-color: white;
		width: 300px;
		height: 460px;
		line-height: 30px;
		margin-top: 20px;
	}

	.index-botton h2{
		color: white;
		font-weight:900;
		margin-left: 20px;
	}

	.index-botton-content{
		background-color: #4bc28c;
		width: 300px;
		height: 30px;
	}

	.index-botton-content li{
		margin-left: 20px;
	}

	.index-botton-content ul{
		margin-top: 20px;
	}

	.index-botton-content a{
		color: black;
	}
	
	/*中间右侧四个单元格*/
	.index-right{
		width: 880px;
		height: 400px;
		background-color: #f2f3f5;
		float: right;
	}

	.index-right-content-button{
		width: 100px;
		height: 30px;
		background-color: #4ec08d;
		line-height: 30px;
		text-align: center;		
	}

	.index-right-content-button a{
		color: white;
	}

	.index-right-content-text{
		width: 430px;
		height: 170px;
		float: left;
		margin-bottom: 20px;
		margin-right: 20px;
		background-color: white;
	}
	
	.line-last{
		margin-right: 0px;
	}
	
	.index-img-1 .index-right-inner{
		width: 200px;
		height: 80px;
		padding-left: 145px;
		background: url(../../static/11.jpg) no-repeat; 
		margin: 44px 43px;
	}

	.index-img-2 .index-right-inner{
		width: 200px;
		height: 80px;
		padding-left: 145px;
		background: url(../../static/22.jpg) no-repeat; 
		margin: 44px 43px;
	}

	.index-img-3 .index-right-inner{
		width: 200px;
		height: 80px;
		padding-left: 145px;
		background: url(../../static/33.jpg) no-repeat; 
		margin: 44px 43px;
	}

	.index-img-4 .index-right-inner{
		width: 200px;
		height: 80px;
		padding-left: 145px;
		background: url(../../static/44.jpg) no-repeat;
		margin: 44px 43px;
	}


	.index-right-inner h2{
		font-weight: 900;
	}

	.index-left-content h3{
		margin-top: 10px;
	}

	.index-right-inner p{
		margin-top: 10px;
		margin-bottom: 10px;
	}
</style>